<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>东方·星言</title>
  <link href="css/styles.css" rel="stylesheet" />
  <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
  <style>
    /* 设置背景图片 */
    body {
      background-image: url('./Images/GameCoverFinal.png'); /* 设置背景图片路径 */
      background-size: cover; /* 背景图片覆盖整个屏幕 */
      background-position: center; /* 背景图片居中 */
      background-repeat: no-repeat; /* 背景图片不重复 */
      height: 100vh; /* 确保页面高度充满屏幕 */
    }

    .spinner-border {
      width: 1rem;
      height: 1rem;
      border-width: .15em;
      vertical-align: text-bottom;
      margin-right: .5rem;
    }
  </style>
</head>
<body class="bg-primary">
  <div id="layoutAuthentication">
    <div id="layoutAuthentication_content">
      <main>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-5">
              <div class="card shadow-lg border-0 rounded-lg mt-5">
                <div class="card-header">
                  <h3 class="text-center font-weight-light my-4" style="font-size: 2rem;">
                    登录
                  </h3>
                </div>
                <div class="card-body">
                  <form id="loginForm" novalidate>
                    <div class="form-floating mb-3 position-relative">
                      <input
                        class="form-control"
                        id="inputUsername"
                        type="text"
                        placeholder="用户名"
                      />
                      <label for="inputUsername">用户名</label>
                      <div class="invalid-feedback"></div>
                    </div>
                    <div class="form-floating mb-2 position-relative">
                      <input
                        class="form-control"
                        id="inputPassword"
                        type="password"
                        placeholder="密码"
                      />
                      <label for="inputPassword">密码</label>
                      <div class="invalid-feedback"></div>
                    </div>
                    <div class="form-check mb-3">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        id="togglePassword"
                      />
                      <label class="form-check-label" for="togglePassword">
                        显示密码
                      </label>
                    </div>
                    <div class="mt-4 mb-0">
                      <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-block" style="font-size: 1.5rem;" id="btnLogin"> 登录 </button>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="card-footer text-center py-3">
                  <div class="small">
                    <a href="register.html">没有账号？ 前往注册!</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
    <div id="layoutAuthentication_footer">
      <footer class="py-4 bg-light mt-auto">
        <div class="container-fluid px-4">
          <div class="d-flex align-items-center justify-content-between small">
            <div class="text-muted">东方·星言</div>
            <div>创作团队 : Team</div>
          </div>
        </div>
      </footer>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  <script src="js/login.js"></script>
</body>
</html>
